import { sendCuesTopicSendTemplateMessage } from '@/services/api/api-cues-topic';
import { PageContainer } from '@ant-design/pro-layout';
import { ActionType } from '@ant-design/pro-table';
import { Modal, message } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';
import TableSubmit from './submit/components/TableSubmit';
import AddTopic from './topic/components/AddTopic';
import DetailsTopic from './topic/components/DetailsTopic';
import TableTopic from './topic/components/TableTopic';

type DetailsType = {
  id: string;
  name: string;
};

export default (): React.ReactNode => {
  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const [visible, setVisibleState] = useState<string>('container');

  const [tabActiveKey, setTabActiveKeyState] = useState<string>('topic');

  const [visibleData, setVisibleDataState] = useState<DetailsType>();

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [topicId, setTopicId] = useState('');

  const onTopicDetails = (id: string, name: string) => {
    setVisibleState('details');
    setVisibleDataState({ id, name });
  };

  const onSubmitDetails = (id: string, name: string) => {
    setVisibleState('details');
    setVisibleDataState({ id, name });
  };

  const onBack = () => {
    setVisibleState('container');
  };

  const container = () => {
    if (visible === 'container') {
      return (
        <PageContainer
          header={{
            breadcrumb: {},
            extra: [
              access.线索上报x选题计划x配置x需求者 &&
                access.线索上报x选题计划x计划列表x创建计划 && (
                  <AddTopic
                    key="add_topic"
                    onRefurbish={(id: string) => {
                      if (tabActiveKey == 'topic') {
                        actionRef?.current?.reloadAndRest();
                        setTopicId(id);
                        setIsModalOpen(true);
                      } else {
                        setVisibleState('container');
                      }
                    }}
                  />
                ),
            ],
          }}
          tabList={[
            {
              tab: '选题征集',
              key: 'topic',
            },
            {
              tab: '选题线索',
              key: 'submit',
            },
          ]}
          tabActiveKey={tabActiveKey}
          onTabChange={setTabActiveKeyState}
        >
          {tabActiveKey == 'topic' ? (
            <TableTopic actionRef={actionRef} onDetails={onTopicDetails} />
          ) : (
            <TableSubmit onDetails={onSubmitDetails} />
          )}
        </PageContainer>
      );
    } else if (visible === 'details') {
      return <DetailsTopic onBack={onBack} id={visibleData?.id} name={visibleData?.name} />;
    }
  };
  return (
    <>
      {container()}
      <Modal
        title="发布成功，是否要全局推送？"
        open={isModalOpen}
        onOk={async () => {
          const pushResponse = await sendCuesTopicSendTemplateMessage({
            id: topicId,
          });
          if (pushResponse.code == 0) {
            message.success('推送成功');
            setIsModalOpen(false);
          }
        }}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <p>对所选用户进行微信服务号模板消息推送。</p>
      </Modal>
    </>
  );
};
